<template>
  <div class="minesettings">
    <div class="mines_tou">
      <p class="min_p1">
        <img @click="props.data(0)" class="img1" src="@/assets/fanhui.png">
        <span class="min_span1">账号与安全</span>
      </p>
    </div>
    <div class="mines_zh" @click="props.data(6)">
      <p class="mines_zh—1">
        <span class="mines_zh—1_span_1">手机账号</span>
        <span class="mines_zh—1_span_2">188****9899</span>
      </p>
      <div class="mines_zh—2">
        <p class="mines_zh—2-p">
          <span class="mines_zh—1_span_3">更改号码</span>
          <img class="mines_zh—2_img" src="@/assets/rigth.png">
        </p>
      </div>
    </div>
    <div class="mines_tou" @click="props.data(6)">
      <p class="min_p1">
        <span class="min_span2">修改密码</span>
        <img class="img4" src="@/assets/rigth.png">
      </p>
    </div>
    <div class="min_wai">
      <span class="span_wai">其他社交账号</span>
    </div>
    <div class="mines_xiao">
      <div class="mines_xiao_div">
        <img src="@/assets/weixin.png">
      </div>
      <span class="mines_xiao_span1">微信</span>
      <span class="mines_xiao_span2">未绑定</span>
      <img class="mines_xiao_img" src="@/assets/rigth.png">
    </div>
    <div class="mines_xiao">
      <div class="mines_xiao_div">
        <img src="@/assets/QQ.png">
      </div>
      <span class="mines_xiao_span1">QQ</span>
      <span class="mines_xiao_span3">未绑定</span>
      <img class="mines_xiao_img" src="@/assets/rigth.png">
    </div>
    <div class="mines_xiao">
      <div class="mines_xiao_div">
        <img src="@/assets/webo.png">
      </div>
      <span class="mines_xiao_span1">微博</span>
      <span class="mines_xiao_span2">未绑定</span>
      <img class="mines_xiao_img" src="@/assets/rigth.png">
    </div>
</div>

</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
const sz=ref(9.9)
const props=defineProps(["data"])

//清除缓存

</script>

<style scoped>
  .mines_xiao_span2{margin-left: 215px;color: #999999;}
  .mines_xiao_span3{margin-left: 221px;color: #999999;}
  .mines_xiao_img{width: 8px;height: 12px;margin-left: 7px;}
  .mines_xiao_span1{margin-left: 10px;}
  .mines_xiao_div{float: left;margin: 10px 0px 0px 20px;width: 32px;height: 32px;border: 1px solid #cdcdcd;border-radius: 50%;text-align: center;line-height: 32px;}
  .min_wai{width: 390;height: 40px;line-height: 30px;background-color: #f2f2f2;}
  .span_wai{font-size: 10px;margin-left: 15px;}
  .mines_zh—1{width: 100px;height: 55px;float: left;}
  .mines_zh—1_span_1{width: 56px;height: 10px;margin:20px 0px 0px 20px;font-size: 14px;}
  .mines_zh—1_span_2{font-size: 10px;margin-left: 20px;color: #a0a2b8;}
  .mines_zh—1_span_3{font-size: 14px;color: #a0a2b8;vertical-align: middle;}
  .mines_zh—2{width: 90px;height: 55px;float: right;line-height: 55px;}
.minesettings{width: 390px;min-height: 800px;background-color: #f2f2f2;}
.minesettings div:hover{cursor: pointer;}
.mines_tou{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.mines_zh{width: 390px;height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.mines_xiao{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.min_p1{width: 100%;height: 21px;}
.img1{width: 9px;height: 14px;vertical-align: middle;margin-left: 20px;}
.min_span1{width: 64px;height: 100%;vertical-align: middle;margin-left: 136px;}
.mines_tou_span1{width: 20px;height:1px;vertical-align: middle;margin-left: 136px;color: #9999b2;margin-left: 237px;}
.min_span2{width: 64px;height: 21px;vertical-align: middle;margin-left: 20px;font-size: 14px;}
.img2{width: 40px;height: 40px; margin-left: 230px;}
.img3{width: 8px;height: 12px;margin-left: 10px;vertical-align: middle;}
.img4{width: 8px;height: 12px;margin-left: 284px;vertical-align: middle;}
.mines_zh—2_img{width: 8px;height: 12px;margin-left: 7px;vertical-align: middle;}
.img5{width: 8px;height: 12px;margin-left: 245px;vertical-align: middle;}
.img6{width: 8px;height: 12px;margin-left: 5px;vertical-align: middle;}
.img7{width: 8px;height: 12px;margin-left: 256px;vertical-align: middle;}
.img8{width: 8px;height: 12px;margin-left: 273px;vertical-align: middle;}
</style>